/*
* @ddescription: 换货-拒绝收货弹窗
* @Author: liyujie
* @Date: 2020-12-08
*/
<template>
    <div class="wrapper">
        <!-- 拒绝收货弹窗 -->
        <el-dialog
            title="拒绝收货"
            :visible.sync="dialogVisible"
            width="660px"
            :close-on-click-modal="false"
        >
            <div style="padding: 0 30px">
                <div>
                    <el-form
                        :model="refuseReceiveForm"
                        :rules="rules"
                        ref="refuseReceive"
                        label-width="120px"
                        label-position="top"
                        class="demo-ruleForm"
                    >
                        <el-form-item
                            label="拒绝收货原因"
                            prop="refuse_reason"
                            class="refuse-reason"
                        >
                            <el-input
                                v-model="refuseReceiveForm.refuse_reason"
                                type="textarea"
                                :autosize="{ minRows: 4, maxRows: 6}"
                                placeholder="请输入拒绝收货理由"
                                maxlength="300"
                                show-word-limit
                            />
                        </el-form-item>
                        <el-form-item
                            label="上传凭证"
                            prop="reasonImage"
                        >
                            <div class="wrap-price">
                                <div
                                    v-if="refuseReceiveForm.reasonImage.length > 0"
                                    :style="{display: 'flex'}"
                                >
                                    <div
                                        v-for="(item,index) in refuseReceiveForm.reasonImage"
                                        :key="index"
                                        class="wrap-list"
                                    >
                                        <img
                                            :src="item"
                                            class="wrap-image"
                                        >
                                        <div class="wrap-action">
                                            <i
                                                class="el-icon-zoom-in"
                                                @click="fnPrevieImage(index)"
                                            />
                                            <i
                                                class="el-icon-delete"
                                                @click="fnDeleteImage(index)"
                                            />
                                        </div>
                                    </div>
                                </div>
                                <el-upload
                                    v-if="refuseReceiveForm.reasonImage.length < 6"
                                    class="avatar-uploader-thumb"
                                    action="https://jsonplaceholder.typicode.com/posts/"
                                    list-type="picture-card"
                                    :show-file-list="false"
                                    :http-request="fnUploadImageOfGoods"
                                    :before-upload="beforeAvatarUpload"
                                    :on-exceed="handleExceed"
                                    accept="image/*"
                                    :multiple="true"
                                    :limit="6"
                                >
                                    <template>
                                        <i class="el-icon-plus" />
                                    </template>
                                </el-upload>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <span
                slot="footer"
                class="dialog-footer"
            >
                <el-button
                    @click="dialogVisible = false"
                    size="medium"
                    type="default"
                    :style="{width: '120px', marginRight: '32px'}"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    size="medium"
                    :style="{width: '120px'}"
                    @click="handleRefuseReceive()"
                >
                    确 认
                </el-button>
            </span>
        </el-dialog>
        <!-- 图片预览 -->
        <img-preview
            ref="preview"
        />
    </div>
</template>

<script>
import imgPreview from '@/components/common/img-preview';
export default {
    name: 'RefuseReceive',
    data () {
        return {
            dialogVisible: false,

            /// 拒绝收货表单
            refuseReceiveForm: {
                apply_no: '',
                refuse_reason: '',
                reasonImage: []
            },
            // 拒绝收货校验
            rules: {
                refuse_reason: [
                    { required: true, message: '请输入拒绝收货理由', trigger: 'blur' }
                ],
                reasonImage: [
                    { required: true, message: '请上传凭证', trigger: 'change' }
                ]
            }
        };
    },
    components: { imgPreview },
    watch: {
        dialogVisible (val) {
            if(!val) {
                this.$set(this.refuseReceiveForm, 'refuse_reason', '');
                this.$set(this.refuseReceiveForm, 'reasonImage', []);
            }
        },
    },
    mounted () {},
    methods: {
        /**
         * @description 打开弹窗
         * @param row
         */
        show (row) {
            this.refuseReceiveForm.apply_no = row.apply_no;
            this.dialogVisible = true;
        },

        /**
         * @description 关闭弹窗
         */
        close () {
            this.dialogVisible = false;
        },

        /**
         * @description: 预览图片
         */
        fnPrevieImage (index) {
            this.$refs.preview.show(this.refuseReceiveForm.reasonImage, index);
        },

        /**
         * @description: 删除图片
         */
        fnDeleteImage (index) {
            this.refuseReceiveForm.reasonImage.splice(index, 1);
        },

        /**
         * @description: 上传图片后逻辑处理
         */
        fnUploadImageOfGoods(e) {
            this.fnUploadImage(e, (resp) => {
                if(this.refuseReceiveForm.reasonImage.length >= 6) {
                    this.$notify({
                        title: '提示',
                        message: '最多只可以上传6张',
                        type: 'warning',
                        duration: 2000
                    });
                    return false;
                }
                this.refuseReceiveForm.reasonImage = this.refuseReceiveForm.reasonImage.concat([
                    resp.data.url
                ]);
            }, (error) => {
                this.$notify({
                    title: '提示',
                    message: error.msg,
                    type: 'warning',
                    duration: 2000
                });
            });
        },

        /**
         * @description: 超出上传个数
         */
        handleExceed (files) {
            console.log(Object.keys(files).length);
            if(Object.keys(files).length > 6) {
                this.$notify({
                    title: '提示',
                    message: '最多只可以上传6张',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }
        },

        /**
         * @description: 上传图片限制
         * @param {Object}  文件钩子
         */
        beforeAvatarUpload(file, fileList) {
            let type = ['image/jpeg', 'image/png', 'image/gif', 'image/jpg'],
                size = 1048576,
                isType = type.includes(file.type),
                isLt1M = file.size < size;

            if(!isType) {
                this.$notify({
                    title: '提示',
                    message: '仅可上传JPG、PNG、JPEG、GIF格式的图片',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if(!isLt1M) {
                this.$notify({
                    title: '提示',
                    message: '上传头像图片大小不能超过1MB',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            return isType && isLt1M;
        },

        /**
         * @description: 上传图片函数
         */
        fnUploadImage(e, success, error) {
            let pic = new FormData();

            pic.append('image', e.file);
            this.$upload('/Upload/image', pic).then(resp => {
                if (resp.code === 1) {
                    success(resp);
                } else {
                    error(resp);
                }
            });
        },

        /**
         * 拒绝收货
         */
        handleRefuseReceive() {
            this.$refs['refuseReceive'].validate((valid) => {
                if (valid) {
                    // 拒绝收货
                    let params = {...this.refuseReceiveForm};

                    params.type = 2;
                    params.hire_evidence = params.reasonImage.join();
                    delete params.reasonImage;

                    this.$post('/ShopGoodsOrderCancelApply/verify', params, resp => {
                        if (resp.code === 1) {
                            this.dialogVisible = false;
                            this.$emit('update');
                            this.$notify({
                                title: '提示',
                                message: '操作成功',
                                duration: 2000,
                                type: 'success'
                            });
                        } else {
                            this.$notify({
                                title: '警告',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                }
            });
        }
    }
};
</script>

<style lang="less" scoped>
// 上传图片
.wrap-price {
    width: 520px;
    height: 80px;
    box-sizing: border-box;
    display: flex;
    align-items: center;
    .el-icon-plus {
        color: #999;
        font-size: 30px;
    }
    .wrap-list {
        width: 80px;
        height: 80px;
        overflow: hidden;
        border-radius: 4px;
        margin-right: 30px;
        position: relative;
        .wrap-image {
            width: 80px;
            height: 80px;
            border-radius: 4px;
        }
        .wrap-action {
            position: absolute;
            left: 0;
            top: 0;
            z-index: 1;
            width: 80px;
            height: 80px;
            border-radius: 4px;
            background: rgba(0,0,0,.7);
            justify-content: center;
            align-items: center;
            display: none;
            i {
                color: #ffffff;
                font-size: 17px;
                cursor: pointer;
            }
            .el-icon-delete {
                margin-left: 17px;
            }
        }
        &:hover {
            .wrap-action {
                display: flex;
            }
        }
    }
    /deep/ .el-upload--picture-card {
        width: 80px;
        height: 80px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
        background:rgba(242,242,242,1);
    }
}
.dialog-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}
</style>
